<template>
    <div class="searchContainer">
         <div class="search">
            <input  type="" placeholder="输入关键词搜索相关内容" >
        </div>
        <div @click="show = true">
            <span class="iconfont icon-shaixuan"></span>
            <span class="icon-wenzi"> 筛选</span>
        </div>
       <div class="layer" v-show="show" @click="show = false">
          <choose></choose>
         </div>
    </div>
</template>

<script>
import choose from "@/components/item-choose"
export default {
    components:{
        choose
    },
    data() {
    return {
      show: false
    };
  },
}
</script>

<style lang="less">
.searchContainer{
    width: 100%;
    padding: 2vw 5vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .search input {
      width: 85%;
      border: none;
      height: 30px;
      line-height: 30px;
      border-radius: 16px;
      background: #f4f4f4;
      padding: 0 25px;
      text-align: center;
      font-size: 12px;
    }
    .iconfont{
        font-size: 16px;
        padding-right: 5px;
    }
    .icon-wenzi{
        font-size: 14px;
        :hover{
            color: #FF0D2B;
        }
    }
}
</style>